<template>
  <div class="text-white" v-if="menuitem.func" :id="'menu-' + menuitem.name">
    <div v-if="menuitem.type === 'label' && !menuitem.expansion" >
      <q-item-label header>
        {{menuitem.caption}}
      </q-item-label>
      <q-list>
        <menu-item
          v-for="item in menuitem.children.filter(v => v.func)"
          :key="item.name"
          :menuitem="item"
        />
      </q-list>
    </div>
    <q-expansion-item
      v-else-if="menuitem.type === 'label' && !!menuitem.expansion"
      expand-separator
      :icon="menuitem.icon"
      :label="menuitem.caption"
    >
      <q-list class="q-pl-md">
        <menu-item
          v-for="item in menuitem.children.filter(v => v.func)"
          :key="item.name"
          :menuitem="item"
          :id="'menu-' + item.name"
        />
      </q-list>
    </q-expansion-item>

    <q-item
      v-if="menuitem.type=='menu'"
      clickable
      v-ripple
      :target="menuitem.target || ''"
      :to="path(menuitem)"
    >
      <q-item-section avatar v-if="menuitem.icon">
        <q-icon :name="menuitem.icon" />
      </q-item-section>
      <q-item-section>{{menuitem.caption}}</q-item-section>
      <q-badge
        v-if="menuitem.badge"
        color="red"
        floating
        style="margin-right: 14px;"
      >
        {{menuitem.badge}}
      </q-badge>
    </q-item>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'menuItem',
  props: {
    menuitem: { // 菜单项
      type: Object,
      default: () => {}
    }
  },
  methods: {
    path (menuitem) {
      let path = '';
      if (menuitem.prePath === undefined || menuitem.prePath === null) {
        path = '/main/' + menuitem.name;
      } else {
        path = menuitem.prePath + menuitem.name;
      }
      return path;
    }
  }
});

</script>
